<template>
    <div>

        <div class="Number text-[#1e1e1e] text-3xl ml-84">评论 &nbsp;<span class="text-[#989898]">{{ commentCount }} </span>
        </div>
        <a-comment class="ml-74 ">
            <a-avatar class="w-18 h-18"  slot="avatar" :src="userInfo.avatar" alt="Han Solo" />
            <div slot="content" class="flex-1">
                <a-form-item>
                    <a-textarea class="text-2xl" placeholder="说两句吧~" :rows="6" @change="handleChange" :value="value"></a-textarea>
                </a-form-item>
                <a-form-item class="text-right ">
                    <a-button class="text-2xl" htmlType="submit" :loading="submitting" @click="handleSubmit" type="primary">
                        添加评论
                    </a-button>
                    <a-button class="text-2xl" v-if="showCancle" style="margin-left:5px;" @click="handleCancle">
                        取消评论
                    </a-button>
                </a-form-item>
            </div>
        </a-comment>
    </div>
</template>
<script>

export default {
    props: {
        userInfo: {
            type: Object
        },
        replyInfo: {
            type: Object
        },
        showCancle: {
            type: Boolean,
            default: true
        },
        commentCount: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            comments: [],
            submitting: false,
            value: '',
        };
    },
    methods: {
        handleSubmit() {
            this.comments = {
                uid: this.$store.state.app.id,
                replyUid: this.replyInfo.replyUid,
                userName: this.userInfo.userName,
                avatar: this.userInfo.avatar,
                content: this.value,
                reply: []
            }
            this.value = '';
            this.$emit("submit-box", this.comments)
        },
        handleChange(e) {
            this.value = e.target.value;
        },
        handleCancle() {
            this.value = '';
            this.$emit("cancel-box", this.replyInfo.replyUid)
        }
    },
};
</script>

<style lang="scss" scoped>
.ant-comment :deep(.ant-comment-nested) {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 10px;
}

.ant-comment {
    .ant-btn {
        height: fit-content !important;
    }

    textarea::-webkit-input-placeholder {
        font-size: 24px !important;

    }

    :deep(.ant-comment-nested) {
        // margin-left: 0 !important;
    }
}
</style>
